import { changeColor, changeCompactTable, changeCssVariable } from '@/utils/theme-utils'

export const DEFAULT_THEME = Object.freeze({
  // 主题
  theme: null,
  // 当前颜色
  color: '#1890ff',
  // 字体颜色
  // fontColor: null,
  // 是否折叠侧边栏
  collapse: false,
  sideOpen: true,
  // 侧边栏颜色
  // sideBgColor: null,
  // 顶栏颜色
  // headBgColor: null,
  // 侧边栏暗黑模式
  // sideDarkMode: true,
  // 顶部暗黑模式
  // headDarkMode: false,
  // 暗黑模式
  // darkMode: false,
  // 页签风格: default(默认), dot(圆点), card(卡片)
  tabsStyle: 'default',
  // 展示页签栏
  showTabs: true,
  // 只保持一个菜单打开
  sideUniqueOpen: false,
  // logo 宽度自适应
  logoAutoSize: false,
  // 显示 logo
  showLogo: true,
  // 导航模式: default(默认), top(顶部), mix(混合)
  navMode: 'default',
  // 紧凑表格
  compactTable: false,
  // 路由切换动画
  transitionName: 'slide-right',
  // 小屏
  mobile: false,
  // 小屏下侧边栏遮罩
  mobileMask: false
})

export default {
  state: Object.assign({}, DEFAULT_THEME),
  mutations: {
    set(state, { key, value }) {
      state[key] = value
    }
  },
  actions: {
    // 设置主题
    setTheme({ commit }, value) {
      commit('set', { key: 'theme', value })
      value.load()
    },
    setSideOpen({ commit }, value) {
      commit('set', { key: 'sideOpen', value })
    },
    // 设置组件颜色
    setColor({ commit, state }, value) {
      commit('set', { key: 'color', value })
      changeColor(value, state.theme.type)
    },
    // 设置字体颜色
    // setFontColor({ commit, state }, value) {
    //   commit('set', { key: 'fontColor', value })
    //   changeCssVariable('color-text-regular', value, state.theme)
    // },
    // 设置菜单折叠
    setCollapse({ commit, dispatch, state }, value) {
      if (state.navMode === 'mix') {
        const width = getComputedStyle(document.querySelector(`${state.darkMode ? '.theme-dark' : ':root'}`)).getPropertyValue('--sidebar-width')
        changeCssVariable('sidebar-width', parseInt(width) ? 0 : `${state.theme.config.sideWidth}px`, state.theme.type)
        state.collapse && commit('set', { key: 'collapse', value })
        commit('set', { key: 'sideOpen', value: !parseInt(width) })
      } else if (state.mobile) {
        changeCssVariable('sidebar-width', value ? `${state.theme.config.sideWidth}px` : 0, state.theme.type)
        dispatch('setMobileMask', value)
        commit('set', { key: 'sideOpen', value })
      } else {
        commit('set', { key: 'collapse', value: !value })
        commit('set', { key: 'sideOpen', value })
      }
    },
    // 设置侧边栏背景色
    // setSideBgColor({ commit, state }, value) {
    //   commit('set', { key: 'sideBgColor', value })
    //   commit('set', { key: 'sideDarkMode', value: false })
    //   changeCssVariable('sidebar-background', value, state.theme.type)
    //   if (!state.logoAutoSize) {
    //     changeCssVariable('logo-background', value, state.theme.type)
    //   }
    // },
    // 设置顶栏背景色
    // setHeadBgColor({ commit, state }, value) {
    //   commit('set', { key: 'headBgColor', value })
    //   commit('set', { key: 'headDarkMode', value: false })
    //   changeCssVariable('header-background', value, state.theme.type)
    //   if (state.logoAutoSize) {
    //     changeCssVariable('logo-background', value, state.theme.type)
    //   }
    // },
    // 设置侧边栏暗黑模式
    // setSideDarkMode({ commit, state }, value) {
    //   commit('set', { key: 'sideDarkMode', value })
    //   commit('set', { key: 'sideBgColor', value: null })
    //   let color
    //   if (state.darkMode || !value) {
    //     color = 'var(--color-white)'
    //   } else {
    //     color = 'var(--menu-dark-background)'
    //   }
    //   changeCssVariable('sidebar-background', color, state.theme.type)
    //   if (!state.logoAutoSize) {
    //     changeCssVariable('logo-background', `var(--sidebar-background)`, state.theme.type)
    //   }
    // },
    // 设置顶栏暗黑模式
    // setHeadDarkMode({ commit, state }, value) {
    //   commit('set', { key: 'headDarkMode', value })
    //   commit('set', { key: 'headBgColor', value: null })
    //   let color
    //   if (state.darkMode || !value) {
    //     color = 'var(--color-white)'
    //   } else {
    //     color = 'var(--menu-dark-background)'
    //   }
    //   changeCssVariable('header-background', color, state.theme.type)
    //   if (state.logoAutoSize) {
    //     changeCssVariable('logo-background', `var(--header-background)`, state.theme.type)
    //   }
    // },
    // 设置暗黑模式
    // setDarkMode({ commit, dispatch, state }, value) {
    //   commit('set', { key: 'theme', value: value ? 'dark' : null })
    //   commit('set', { key: 'darkMode', value })
    //   dispatch('setSideDarkMode', value)
    //   dispatch('setHeadDarkMode', value)
    //   if (value) {
    //     changeCssVariable('logo-background', `var(--color-white)`, state.theme.type)
    //   }
    //   changeTheme(state.theme.type)
    //   changeCssVariable(null, null, state.darkMode)
    //   changeColor(state.color, state.theme.type)
    // },
    // 设置页签风格
    setTabsStyle({ commit }, value) {
      commit('set', { key: 'tabsStyle', value })
    },
    // 设置是否展示页签
    setShowTabs({ commit }, value) {
      commit('set', { key: 'showTabs', value })
    },
    // 设置菜单排他模式
    setSideUniqueOpen({ commit }, value) {
      commit('set', { key: 'sideUniqueOpen', value })
    },
    // 设置 logo 自适应
    setLogoAutoSize({ commit, state }, value) {
      commit('set', { key: 'logoAutoSize', value })
      const color = value ? '--header-background' : '--sidebar-background'
      changeCssVariable('logo-background', `var(${color})`, state.theme.type)
    },
    // 设置是否展示 logo
    setShowLogo({ commit, state }, value) {
      commit('set', { key: 'showLogo', value })
    },
    // 设置是否展示 logo
    setCompactTable({ commit, state }, value) {
      changeCompactTable(value)
      commit('set', { key: 'compactTable', value })
    },
    // 设置导航布局
    setNavMode({ commit, dispatch, state }, value) {
      commit('set', { key: 'navMode', value })
      if (value === 'top') {
        dispatch('setLogoAutoSize', true)
      } else if (value === 'default') {
        changeCssVariable('sidebar-width', `${state.theme.config.sideWidth}px`, state.theme.type)
        dispatch('setLogoAutoSize', false)
      } else {
        dispatch('setCollapse', false)
      }
    },
    // 设置路由切换动画
    setTransitionName({ commit, state }, value) {
      commit('set', { key: 'transitionName', value })
    },
    // 设置小屏下侧边栏遮罩
    setMobile({ commit, dispatch, state }, value) {
      commit('set', { key: 'mobile', value })
      dispatch('setMobileMask', value)
      // dispatch('setCollapse', value)
    },
    // 设置小屏下侧边栏遮罩
    setMobileMask({ commit, state }, value) {
      commit('set', { key: 'mobileMask', value })
    }
  }
}
